<template>
	<view>

		<view class="worksiteList_box">
			<!-- 列表 -->
			<view class="worksiteList_con">
				<view class="worksiteItem" v-for="(item,index) in worksiteList" :key="index">
					<view class="worksiteHead_con" @click="switchChange(item.project_id,item.history)">
						<image class="projectImg" src="/static/projectIcon.png" mode=""></image>
						<view class="worksiteName">{{item.project_name}}</view>
						<view class="worksiteRole">{{item.roleStr}}</view>
						<view class="worksiteDefault" v-if="item.is_default==1">默认</view>
					</view>
					<view class="worksiteStatistics" @click="switchChange(item.project_id,item.history)">
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.total_num}}</view>
							<view class="statisticsType">总工</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.total_money}}</view>
							<view class="statisticsType">总工资</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.total_borrow}}</view>
							<view class="statisticsType">已支付</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.no_money}}</view>
							<view class="statisticsType">剩余工资</view>
						</view>
					</view>
					<view class="worksiteBottom_con" v-if="item.role!=3">
						<view class="worksiteSet" @click="openSetting(index)">
							<u-icon name="setting" color="#8B8A90" size="40"></u-icon>
							<text>设置</text>
						</view>
						<view class="worksitePost">
							<view class="recoverBtn" @click="recoverClick(item.project_id)">
								<image src="/static/recoverIcon.png" mode=""></image>
								<text>恢复</text>
							</view>
							<view class="recoverBtn" @click="openDelShow(item.project_id)" v-if="item.history<2">
								<image src="/static//delIcon.png" mode=""></image>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 分页 -->
			<view class="dataEmpty_con">
				<!-- 加载更多 -->
				<u-empty v-if="worksiteList.length==0"></u-empty>
				<view class="loadmore_box" v-if="worksiteList.length>0">
					<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
				</view>
			</view>
		</view>
		
		<!-- 删除工地弹窗 -->
		<u-mask :show="delShow">
			<view class="delPop_box">
				<view class="delPop_con">
					<form @submit="delSubmit">
						<view class="form_box">
							<!-- <view class="formIcon">
								<image src="/static/img/waringIcon.png" mode=""></image>
							</view> -->
							<view class="formTit">确定删除该项目吗？</view>
							<view class="formWarn">将会失去</view>
							<view class="formClass">
								<view class="classItem">
									记工记录
								</view>
								<view class="classItem">记账记录</view>
							</view>
							<view class="formDel">
								删除验证码【{{project_id}}】确认删除
							</view>
							<view class="controls">
								<input type="number" name="checkCard" placeholder='请输入删除验证码'
									placeholder-class="placeholderColor" />
							</view>
						</view>
						<view class="formPost_con">
							<view class="submitBtn cancelBtn" @click="delShow = false">取消</view>
							<button form-type="submit" hover-class="none" class="submitBtn continueBtn">确定</button>
						</view>
					</form>
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 工地列表
				worksiteList: [],
				
				// 删除工地弹窗
				delShow: false,
				project_id: 1,
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
		},
		onShow() {
			var _this = this;
			_this.pages = 1;
			_this.getWorksiteList();
		},
		onReady() {

		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		methods: {
			// 获取工地列表
			getWorksiteList() {
				var _this = this;
				_this.$u.get('/api/project.index/getList', {
					pages: _this.pages,
					limit: _this.limit,
					history: 1, //0正常、1历史
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工地列表==");
					console.log(res);
					var worksiteList = _this.worksiteList;
					if (_this.pages == 1) {
						worksiteList = [];
					}
					_this.worksiteList = worksiteList.concat(res.data);
					_this.in_num = res.extend.in_num;
					_this.out_num = res.extend.out_num;

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;

				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});
					_this.getWorksiteList();
				}, 2000)
			},

			// 恢复
			recoverClick(project_id) {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确认恢复项目？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.post('/api/project.index/setHistory', {
								project_id: project_id,
							}).then(res => {
								console.log("==恢复==");
								uni.navigateBack({
									delta: 1
								})
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			/**
			 * 删除
			 */
			openDelShow(projectId) {
				var _this = this;
				_this.projectSetShow = false;
				_this.delShow = true;
				_this.project_id = projectId;
			},
			delSubmit(e) {
				var _this = this;
				var delData = e.detail.value;
				if (_this.project_id != delData.checkCard) {
					uni.showModal({
						content: '验证码不对',
						showCancel: false,
					})
					return;
				}
				_this.delData = delData;
				_this.delShow = false;
				_this.$u.throttle(_this.delForm, 3000);
			},

			delForm() {
				var _this = this;
				_this.$u.post('/api/project.index/setDelete', {
					id: _this.project_id,
				}).then(res => {
					console.log("==删除==");
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						_this.getWorksiteList()
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.worksiteList_box {
		padding: 0 30rpx;
	}

	// 列表
	.worksiteList_con {
		padding-top: 30rpx;
		overflow: hidden;
	}

	.worksiteItem {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.worksiteHead_con {
		overflow: hidden;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.projectImg {
		width: 30rpx;
		height: 30rpx;
	}

	.worksiteName {
		flex: 2;
		font-size: 28rpx;
		color: $uni-color;
		margin-left: 10rpx;
	}

	.worksiteRole {
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #4DA199;
		background: #D8F0ED;
		border-radius: 10rpx;
		overflow: hidden;
		margin-left: 20rpx;
	}

	.worksiteDefault {
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #FE6C6C;
		background: #FFF0F0;
		border-radius: 10rpx;
		margin-right: 10rpx;
		overflow: hidden;
		margin-left: 20rpx;
	}

	.worksiteForeman {
		font-size: 28rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.worksiteStatistics {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.statisticsItem {
		flex: 1;
		text-align: center;
	}

	.statisticsMoney {
		font-size: 32rpx;
		color: #333;
	}

	.statisticsType {
		font-size: 28rpx;
		color: $uni-color-text;
		margin-top: 10rpx;
	}

	.worksiteBottom_con {
		padding-top: 20rpx;
		border-top: 2rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.worksiteSet {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.worksiteSet text {
		color: $uni-color-text;
		margin-left: 10rpx;
	}

	.worksitePost {
		display: flex;
		align-items: center;
	}

	.recoverBtn {
		overflow: hidden;
		margin-left: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.recoverBtn image {
		width: 28rpx;
		height: 28rpx;
	}

	.recoverBtn text {
		font-size: 28rpx;
		color: $uni-color;
		margin-left: 10rpx;
	}

	// 删除工地弹窗
	.delPop_box {
		width: 100%;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
	}
	
	.delPop_con {
		width: 550rpx;
		background: linear-gradient(180deg, #C2EBE7 0%, #F5F6F8 25%);
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
	}
	
	.formIcon {
		text-align: center;
		margin-top: -73rpx;
	}
	
	.formIcon image {
		width: 146rpx;
		height: 146rpx;
	}
	
	.formTit {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 40rpx 0;
	}
	
	.formWarn {
		font-size: 30rpx;
		color: #999;
		text-align: center;
	}
	
	.formClass {
		overflow: hidden;
	}
	
	.classItem {
		font-size: 30rpx;
		color: #333;
		text-align: center;
		overflow: hidden;
		margin-top: 30rpx;
		position: relative;
	}
	
	.classItem::before {
		content: '';
		width: 16rpx;
		height: 16rpx;
		background: $uni-color-active;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-left: -80rpx;
	}
	
	.formDel {
		font-size: 30rpx;
		color: #333;
		text-align: center;
		overflow: hidden;
		margin-top: 30rpx;
	}
	
	.delPost_con {
		padding: 0 30rpx 30rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.cancelBtn {
		background: #eee;
		color: #333;
		font-weight: normal;
		color: $uni-color;
	}
	
	.continueBtn {
		font-weight: normal;
		color: $uni-color-white;
		background: $uni-color-active;
		margin-left: 40rpx;
	}

	.controls {
		border-radius: 20rpx;
		width: 100%;
		overflow: hidden;
		padding: 0 30rpx;
		margin: 20rpx auto;
	}

	.controls input {
		height: 90rpx;
		line-height: 20rpx;
		text-align: center;
		margin: 0;
		padding: 0;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: -4rpx;
	}
</style>
